<template>
  <view class="custom-tabs">
    <view class="custom-tabs-bar active">
      <text class="tabbar-text">关注</text>
    </view>
    <view class="custom-tabs-bar">
      <text class="tabbar-text">推荐</text>
    </view>
    <view class="custom-tabs-bar">
      <text class="tabbar-text">护肤</text>
    </view>
    <view class="custom-tabs-bar">
      <text class="tabbar-text">减脂</text>
    </view>
    <view class="custom-tabs-bar">
      <text class="tabbar-text">饮食</text>
    </view>
    <view class="custom-tabs-cursor"></view>
  </view>
</template>

<script lang="ts" setup>
const props = defineProps();
</script>

<style lang="scss" scoped>
// 自定义tabbar
.custom-tabs {
  display: flex;
  position: relative;
  padding: 0 30rpx;
}

.custom-tabs-bar {
  height: 80rpx;
  line-height: 80rpx;
  color: #979797;
  padding-right: 30rpx;
  position: relative;

  &.active {
    color: #121826;
    font-weight: 500;
  }
}

.tabbar-text {
  font-size: 30rpx;
}

.custom-tabs-cursor {
  position: absolute;
  bottom: 3px;
  left: 20px;

  width: 20px;
  height: 2px;
  border-radius: 2px;
  background-color: #2cb5a5;
  transition: all 0.3s ease-out;
}
</style>